
<template>

        <div class="container" :class="{'register-mode': isRegisterMode}">
            <!-- 左侧面板 -->
            <div class="left-side">
                <div class="left-content">
                  <img :src="require('@/assets/logo.png')" alt="Logo">
                </div>
            </div>

            <!-- 右侧登录面板 -->
            <div class="right-side">
                <div class="login-form">
                    <div class="login-title">网试宝库&nbsp;||&nbsp;登录</div>
                    <div class="login-type-switch" :class="{'moving': isMoving, 'email-active': isEmailLogin}">
                        <button :class="{active: !isEmailLogin}" @click="switchLoginType('idcard')">身份证登录</button>
                        <button :class="{active: isEmailLogin}" @click="switchLoginType('email')">邮箱登录</button>
                    </div>

                    <!-- 身份证登录表单 -->
                    <div id="idcard-login" :class="{hide: isEmailLogin}">
                        <div class="input-group">
                            <i class="fas fa-id-card input-icon"></i>
                            <input type="text" class="input-field" placeholder="请输入身份证号" v-model="idcardForm.idcard">
                        </div>
                        <div class="input-group">
                            <i class="fas fa-lock input-icon"></i>
                            <input type="password" class="input-field" placeholder="请输入密码" v-model="idcardForm.password">
                        </div>
                        <div class="remember-forgot">
                            <label>
                                <input type="checkbox" v-model="idcardForm.remember"> 记住密码
                            </label>
                            <a href="#">忘记密码？</a>
                        </div>
                        <button class="btn" @click="handleIdcardLogin">登录</button>
                    </div>

                    <!-- 邮箱登录表单 -->
                    <div id="email-login" :class="{hide: !isEmailLogin, active: isEmailLogin}">
                        <div class="input-group">
                            <i class="fas fa-envelope input-icon"></i>
                            <input type="email" class="input-field" placeholder="请输入邮箱" v-model="emailForm.email">
                        </div>
                        <div class="input-group verify-code-group">
                            <i class="fas fa-shield-alt input-icon"></i>
                            <input type="text" class="input-field" placeholder="请输入验证码" v-model="emailForm.code">
                            <button class="verify-code-btn" 
                                    @click="sendVerifyCode" 
                                    :disabled="isCountingDown">
                                {{countDownText}}
                            </button>
                        </div>
                        <button class="btn" @click="handleEmailLogin">登录</button>
                    </div>

                    <div class="register-link">
                        还没有账号？<a href="#" @click.prevent="toggleRegister">注册账号</a>
                    </div>
                </div>
            </div>

            <!-- 注册表单 -->
            <div class="register-form">
                <div class="login-title">网试宝库&nbsp;||&nbsp;注册</div>
                <div class="register-form-content">
                    <div class="input-group">
                        <i class="fas fa-envelope input-icon"></i>
                        <input type="email" class="input-field" placeholder="请输入邮箱" v-model="registerForm.email">
                    </div>
                    <!-- <div class="input-group">
                        <i class="fas fa-id-card input-icon"></i>
                        <input type="text" class="input-field" placeholder="请输入身份证号" v-model="registerForm.idcard">
                    </div> -->
                    <div class="input-group verify-code-group">
                        <i class="fas fa-shield-alt input-icon"></i>
                        <input type="text" class="input-field" placeholder="请输入验证码" v-model="emailForm.code">
                        <button class="verify-code-btn" 
                                @click="sendVerifyCode" 
                                :disabled="isCountingDown">
                            {{countDownText}}
                        </button>
                    </div>
                    <div class="input-group">
                        <i class="fas fa-lock input-icon"></i>
                        <input type="password" class="input-field" placeholder="请输入密码" v-model="registerForm.password">
                    </div>
                    <div class="input-group">
                        <i class="fas fa-lock input-icon"></i>
                        <input type="password" class="input-field" placeholder="请确认密码" v-model="registerForm.confirmPassword">
                    </div>
                    <button class="btn" @click="handleRegister">注册</button>
                    <div class="register-link">
                        已有账号？<a href="#" @click.prevent="toggleRegister">返回登录</a>
                    </div>
                </div>
            </div>
        </div>
<!-- 
        <div class="footer">
            Copyright © 2024-2025 网试宝库
        </div> -->

</template>

<script>
import axios from 'axios';

export default {
  data(){
    return{
      isEmailLogin: false,
        isMoving: false,
        isRegisterMode: false,
        isCountingDown: false,
        countdown: 60,
        countDownText: '获取验证码',
        
        // 身份证登录表单数据
        idcardForm: {
            idcard: '',
            password: '',
            remember: false
        },
        
        // 邮箱登录表单数据
        emailForm: {
            email: '',
            code: ''
        },
        
        // 注册表单数据
        registerForm: {
            email: '',
            password: '',
            confirmPassword: ''
        },
    }
        
    },
    mounted() {
        const savedIdcard = localStorage.getItem('idcard');
        const savedPassword = localStorage.getItem('password');
        const remember = localStorage.getItem('remember') === 'true';
    
        if (remember && savedIdcard && savedPassword) {
            this.idcardForm.idcard = savedIdcard;
            this.idcardForm.password = savedPassword;
            this.idcardForm.remember = true;
        }
    },
    methods: {
        // 切换登录方式
        switchLoginType(type) {
            if (this.isMoving) return;
            this.isMoving = true;
            
            setTimeout(() => {
                this.isEmailLogin = type === 'email';
                setTimeout(() => {
                    this.isMoving = false;
                }, 300);
            }, 150);
        },
        
        // 发送验证码
        sendVerifyCode() {
            if (this.isCountingDown) return;
            
            // TODO: 调用发送验证码接口
            
            this.isCountingDown = true;
            this.countdown = 60;
            this.countDownText = `${this.countdown}秒后重试`;
            
            const timer = setInterval(() => {
                this.countdown--;
                this.countDownText = `${this.countdown}秒后重试`;
                
                if (this.countdown <= 0) {
                    clearInterval(timer);
                    this.isCountingDown = false;
                    this.countDownText = '获取验证码';
                }
            }, 1000);
        },
        
        // 切换注册模式
        toggleRegister() {
            this.isRegisterMode = !this.isRegisterMode;
            let leftSide = document.querySelector(".left-side");

    // 先移除 class，强制重置动画
    leftSide.classList.remove("animated", "reverse");

    // 使用 setTimeout 让浏览器刷新 DOM，再重新添加 class 触发动画
    setTimeout(() => {
        leftSide.classList.add("animated");

        // 控制动画方向
        if (this.isRegisterMode) {
            leftSide.classList.add("reverse");
        }
    }, 10);
        },
        
        // 身份证登录
        handleIdcardLogin() {
            console.log('身份证登录:', this.idcardForm);
            axios.post('http://localhost:8080/user/loginjson', {
              withCredentials: true, 
                identityCard: this.idcardForm.idcard,
                password: this.idcardForm.password
            })
            .then(res => {
                if(res.data == "登录成功"){
                    if (this.idcardForm.remember) {
                        // 存储身份证号和密码
                        localStorage.setItem('idcard', this.idcardForm.idcard);
                        localStorage.setItem('password', this.idcardForm.password);
                        localStorage.setItem('remember', 'true');
                    } else {
                        // 取消存储
                        localStorage.removeItem('idcard');
                        localStorage.removeItem('password');
                        localStorage.setItem('remember', 'false');
                    }
                    this.$message.success(res.data)
                    window.location.href = './index.html'; 
                }else{
                    this.$message.error(res.data)
                }
            })
            .catch(err => {
                console.error(err);
            });
        },
        
        // 邮箱登录
        handleEmailLogin() {
            // TODO: 实现邮箱登录逻辑
            console.log('邮箱登录:', this.emailForm);
        },
        
        // 注册
        handleRegister() {
            //验证
            const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d).{6,20}$/;
            const emailRegex = /^(?!.*\.\.)[A-Za-z0-9][A-Za-z0-9._%+-]*@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
            if (!emailRegex.test(this.registerForm.email)) {
                this.$message.error("邮箱格式不正确")
                return;
            }
            if (!passwordRegex.test(this.registerForm.password)) {
                this.$message.error("密码必须至少 6 位，并包含至少一个字母和一个数字")
                return;
            }
            if(this.registerForm.password != this.registerForm.confirmPassword){
                this.$message.error("两次密码不一致")
                return;
            }
            //注册请求
            axios.post('http://localhost:8080/user/studentregisterjson', this.registerForm)
            .then(res => {
                if(res.data == "注册成功"){
                    this.$message.success(res.data)
                }else{
                    this.$message.error(res.data)
                }
            })
            .catch(error => {
                console.error(error);
            });
        }
    }
};
</script>

<style >
:root {
    --form-width: 320px;
    --input-height: 45px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: url(../assets/图片6.jpg) no-repeat center center fixed;
    background-size: cover;
    backdrop-filter: blur(7px);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    width: 900px;
    max-width: 100%;
    min-height: 500px;
    display: flex;
}

/* 左侧面板样式 */
.left-side {
    flex: 1;
    padding: 40px;
    background: linear-gradient(to left, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    color: white;
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    border-radius: 20px;
    transition: transform 0.6s ease-in-out;
}
.animated {
    animation: a 0.6s linear forwards;
}
.reverse {
    animation-direction: reverse;
}
.container.register-mode .left-side {
    transform: translateX(100%);
}

.logo {
    font-size: 24px;
    margin-bottom: 20px;
}

.left-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.left-content h1 {
    margin-bottom: 30px;
    font-size: 32px;
}

.left-content img {
    width: 100%;
    max-width: 300px;
}

/* 右侧面板样式 */
.right-side {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    z-index: 1;
    transition: transform 0.6s ease-in-out;
    padding-top: 70px;
}

.container.register-mode .right-side {
    transform: translateX(-100%);
}

/* 登录表单样式 */
.login-form {
    width: 100%;
    max-width: var(--form-width);
    transition: all 0.6s ease-in-out;
    opacity: 1;
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container.register-mode .login-form {
    opacity: 0;
    transform: translateX(-30px);
    pointer-events: none;
}

.login-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
    font-weight: bold;
}

/* 登录方式切换样式 */
.login-type-switch {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 20px;
    position: relative;
}

.login-type-switch::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 85px;
    height: 2px;
    background: #3490de;
    transition: transform 0.3s ease;
}

.login-type-switch button {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 14px;
}

.login-type-switch button:hover {
    color: #3490de;
    transition: color 0.3s ease;
}

.login-type-switch button.active {
    color: #3490de;
}

.login-type-switch.email-active::after {
    transform: translateX(105px);
}

.login-type-switch.moving::after {
    background: linear-gradient(90deg, 
        #3490de 0%, 
        #3490de 50%, 
        transparent 50%, 
        transparent 100%
    );
    background-size: 200% 100%;
    animation: moveWave 0.3s linear;
}

@keyframes moveWave {
    0% {
        width: 85px;
        background-position: 100% 0;
    }
    50% {
        width: 190px;
        background-position: 50% 0;
    }
    100% {
        width: 85px;
        background-position: 0 0;
    }
}

/* 输入框组样式 */
.input-group {
    position: relative;
    margin-bottom: 25px;
    width: 100%;
}

.input-field {
    width: 100%;
    height: var(--input-height);
    padding-left: 40px;
    border: 1px solid #ddd;
    border-radius: 22px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    transition: all 0.3s ease;
}

.input-field:focus {
    border-color: #3490de;
    box-shadow: 0 0 0 3px rgba(72, 201, 163, 0.1);
    outline: none;
}

.input-field:focus + .input-icon {
    color: #3490de;
}

.input-field:hover {
    border-color: #3490de;
}

/* 验证码按钮样式 */
.verify-code-group .input-field {
    padding-right: 130px;
}

.verify-code-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    height: calc(var(--input-height) - 10px);
    padding: 0 20px;
    border: none;
    background: #3490de;
    color: white;
    border-radius: 22px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.verify-code-btn:hover {
    background: #355c7d;
}

.verify-code-btn:active {
    transform: translateY(-50%) scale(0.98);
}

.verify-code-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* 记住密码样式 */
.remember-forgot {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1;
}

.remember-forgot label {
    display: inline-flex;
    align-items: center;
    color: #666;
    cursor: pointer;
    gap: 5px;
    height: 14px;
    line-height: 14px;
}

.remember-forgot input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    width: 14px;
    height: 14px;
    vertical-align: top;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 3px;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
}

.remember-forgot input[type="checkbox"]:checked {
    background: #3490de;
    border-color: #3490de;
}

.remember-forgot input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 12px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.remember-forgot a {
    color: #3490de;
    text-decoration: none;
    line-height: 14px;
    height: 14px;
    display: inline-block;
}

/* 按钮样式 */
.btn {
    width: 100%;
    height: var(--input-height);
    border: none;
    background: #3490de;
    color: white;
    font-size: 16px;
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.3s;
}

#idcard-login .btn {
    margin-top: 0;
}

#email-login .btn {
    margin-top: 20px;
}

/* 登录表单切换样式 */
#idcard-login, #email-login {
    transition: all 0.3s ease-in-out;
    opacity: 1;
    transform: translateX(0);
    position: absolute;
    width: 100%;
    left: 0;
    top: 120px;
    pointer-events: none;
}

#idcard-login {
    pointer-events: auto;
}

#email-login {
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateX(20px);
    position: absolute;
    width: 100%;
    left: 0;
    top: 120px;
    pointer-events: none;
}

#email-login.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

#idcard-login.hide {
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
}

#email-login.hide {
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
}

/* 修改注册表单样式 */
.register-form {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    z-index: 1;
    opacity: 0;
    transition: all 0.6s ease-in-out;
    transform: translateX(100%);
    pointer-events: none;
}

/* 添加注册表单内容容器 */
.register-form-content {
    width: 100%;
    max-width: var(--form-width);
    min-height: 400px;  /* 与登录表单一致 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 修改注册表单标题位置 */
.register-form .login-title {
    width: 100%;
    max-width: var(--form-width);
    text-align: center;
    margin-bottom: 40px;
}

.container.register-mode .register-form {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* 修改注册表单内容的宽度限制 */
.register-form .input-group,
.register-form .btn {
    width: 100%;
    max-width: var(--form-width);
}

.register-link {
    margin-top: 20px;
    text-align: center;
    width: 100%;
    font-size: 14px;
    color: #666;
    position: absolute;
    bottom: 25px;
}

.register-link a {
    color: #3490de;
    text-decoration: none;
    font-weight: bold;
}

/* 页脚样式
.footer {
    position: fixed;
    bottom: 20px;
    text-align: center;
    color: white;
    font-size: 12px;
    left: 50%;
    transform: translateX(-50%);
} */
@keyframes a {
    0% { 
        background-image: linear-gradient(90.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    1% { 
        background-image: linear-gradient(91.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    2% { 
        background-image: linear-gradient(93.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    3% { 
        background-image: linear-gradient(95.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    4% { 
        background-image: linear-gradient(97.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    5% { 
        background-image: linear-gradient(99.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    6% { 
        background-image: linear-gradient(100.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    7% { 
        background-image: linear-gradient(102.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    8% { 
        background-image: linear-gradient(104.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    9% { 
        background-image: linear-gradient(106.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    10% { 
        background-image: linear-gradient(108.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    11% { 
        background-image: linear-gradient(109.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    12% { 
        background-image: linear-gradient(111.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    13% { 
        background-image: linear-gradient(113.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    14% { 
        background-image: linear-gradient(115.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    15% { 
        background-image: linear-gradient(117.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    16% { 
        background-image: linear-gradient(118.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    17% { 
        background-image: linear-gradient(120.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    18% { 
        background-image: linear-gradient(122.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    19% { 
        background-image: linear-gradient(124.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    20% { 
        background-image: linear-gradient(126.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    21% { 
        background-image: linear-gradient(127.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    22% { 
        background-image: linear-gradient(129.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    23% { 
        background-image: linear-gradient(131.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    24% { 
        background-image: linear-gradient(133.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    25% { 
        background-image: linear-gradient(135.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    26% { 
        background-image: linear-gradient(136.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    27% { 
        background-image: linear-gradient(138.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    28% { 
        background-image: linear-gradient(140.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    29% { 
        background-image: linear-gradient(142.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    30% { 
        background-image: linear-gradient(144.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    31% { 
        background-image: linear-gradient(145.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    32% { 
        background-image: linear-gradient(147.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    33% { 
        background-image: linear-gradient(149.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    34% { 
        background-image: linear-gradient(151.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    35% { 
        background-image: linear-gradient(153.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    36% { 
        background-image: linear-gradient(154.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    37% { 
        background-image: linear-gradient(156.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    38% { 
        background-image: linear-gradient(158.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    39% { 
        background-image: linear-gradient(160.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    40% { 
        background-image: linear-gradient(162.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    41% { 
        background-image: linear-gradient(163.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    42% { 
        background-image: linear-gradient(165.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    43% { 
        background-image: linear-gradient(167.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    44% { 
        background-image: linear-gradient(169.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    45% { 
        background-image: linear-gradient(171.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    46% { 
        background-image: linear-gradient(172.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    47% { 
        background-image: linear-gradient(174.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    48% { 
        background-image: linear-gradient(176.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    49% { 
        background-image: linear-gradient(178.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    50% { 
        background-image: linear-gradient(180.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    51% { 
        background-image: linear-gradient(181.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    52% { 
        background-image: linear-gradient(183.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    53% { 
        background-image: linear-gradient(185.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    54% { 
        background-image: linear-gradient(187.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    55% { 
        background-image: linear-gradient(189.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    56% { 
        background-image: linear-gradient(190.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    57% { 
        background-image: linear-gradient(192.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    58% { 
        background-image: linear-gradient(194.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    59% { 
        background-image: linear-gradient(196.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    60% { 
        background-image: linear-gradient(198.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    61% { 
        background-image: linear-gradient(199.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    62% { 
        background-image: linear-gradient(201.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    63% { 
        background-image: linear-gradient(203.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    64% { 
        background-image: linear-gradient(205.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    65% { 
        background-image: linear-gradient(207.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    66% { 
        background-image: linear-gradient(208.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    67% { 
        background-image: linear-gradient(210.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    68% { 
        background-image: linear-gradient(212.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    69% { 
        background-image: linear-gradient(214.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    70% { 
        background-image: linear-gradient(216.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    71% { 
        background-image: linear-gradient(217.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    72% { 
        background-image: linear-gradient(219.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    73% { 
        background-image: linear-gradient(221.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    74% { 
        background-image: linear-gradient(223.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    75% { 
        background-image: linear-gradient(225.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    76% { 
        background-image: linear-gradient(226.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    77% { 
        background-image: linear-gradient(228.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    78% { 
        background-image: linear-gradient(230.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    79% { 
        background-image: linear-gradient(232.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    80% { 
        background-image: linear-gradient(234.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    81% { 
        background-image: linear-gradient(235.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    82% { 
        background-image: linear-gradient(237.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    83% { 
        background-image: linear-gradient(239.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    84% { 
        background-image: linear-gradient(241.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    85% { 
        background-image: linear-gradient(243.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    86% { 
        background-image: linear-gradient(244.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    87% { 
        background-image: linear-gradient(246.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    88% { 
        background-image: linear-gradient(248.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    89% { 
        background-image: linear-gradient(250.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    90% { 
        background-image: linear-gradient(252.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    91% { 
        background-image: linear-gradient(253.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    92% { 
        background-image: linear-gradient(255.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    93% { 
        background-image: linear-gradient(257.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    94% { 
        background-image: linear-gradient(259.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    95% { 
        background-image: linear-gradient(261.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    96% { 
        background-image: linear-gradient(262.8deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    97% { 
        background-image: linear-gradient(264.6deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    98% { 
        background-image: linear-gradient(266.4deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    99% { 
        background-image: linear-gradient(268.2deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }

    100% { 
        background-image: linear-gradient(270.0deg, #ffffff, #dfdff6, #b7c2ee, #85a8e6, #3490de);
    }
}
</style>
